<template>
    <div  class="custom-drawer" :class="{ 'drawer-open': modelValue }">
        <!-- 遮罩层 -->
        <div class="drawer-mask" v-if="modelValue" @click="handleClose"></div>
        
        <!-- 抽屉主体 -->
        <div class="drawer-content" :style="{ width: width + 'px' }">
            <!-- 关闭按钮区域 -->
            <div class="drawer-close">
                <div class="close-handle" @click="handleClose">
                    <CloseOutlined />
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="drawer-body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue'

interface Props {
    modelValue: boolean
    width?: number
}

const props = withDefaults(defineProps<Props>(), {
    width: 740
})

const emit = defineEmits(['update:modelValue', 'close'])

const handleClose = () => {
    emit('update:modelValue', false)
    emit('close')
}
</script>

<style lang="scss" scoped>
.custom-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
        // 初始状态
    .drawer-mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: auto;
    }
    .drawer-content {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        transform: translateX(100%);
        transition: transform 0.3s;
        pointer-events: auto;
    }
    
    .drawer-close {
        position: absolute;
        top: 0;
        left: -36px; /* 留出足够空间放置关闭按钮 */
        bottom: 0;
        pointer-events: none; /* 防止整个区域可点击 */
        transform: translateX(-100%);
        .close-handle {
            position: absolute;
            top: 50%;
            left: 0;
            width: 36px;
            height: 126px;
            margin-top: -18px;
            background: #fff;
            border-radius: 18px 0 0 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto; /* 恢复按钮点击 */
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.3s;
            
            &:hover {
                background-color: #f0f0f0;
            }
            
            .anticon {
                margin-right: 6px;
                font-size: 16px;
                color: #666;
            }
            :deep(.anticon){
                margin-right: 0;
            }
        }
    }
    
    .drawer-body {
        flex: 1;
        overflow: auto;
        padding: 15px;
        height: calc(100vh - 104px);
        overflow-y: auto;
        scrollbar-gutter: stable;
        overflow-x: hidden;

        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }

        &:hover::-webkit-scrollbar {
            opacity: 1;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;

            &:hover {
                background-color: #ccc;
            }
        }
    }
    
    // 打开状态
    &.drawer-open {
        .drawer-mask {
            opacity: 1;
        }
        
        .drawer-content {
            transform: translateX(0);
            box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08);
        }
        
        .close-handle {
            opacity: 1;
            transform: translateX(0);
        }
    }
}
</style>